<style scoped>
    @import '../styles/group.css';
    .pintuan_duobaol{
        font-size:.12rem;
        height: 100%;
        font-family: 'Microsoft JhengHei Light', 'Microsoft JhengHei', 'Microsoft YaHei Light', 'Microsoft YaHei', sans-serif;
    }

    .fixed_qr_btn {
        width: .48rem;
        height: .48rem;
        position: fixed;
        right: .10rem;
        top: 50%;
        z-index: 99;
        transform: translateY(-50%);
        background: url('') center center / cover;
    }

    .chengt_bifa .pintuan_status{
        position: absolute;
        width:.64rem;
        height:.64rem;
        right:0;
        bottom:0;
        -webkit-transform: rotate(-9deg);
        -moz-transform: rotate(-9deg);
        -ms-transform: rotate(-9deg);
        -o-transform: rotate(-9deg);
        transform: rotate(-9deg);
    }

    .chengt_bifa .pintuan_status img{
        width:100%;
        height:100%;
        object-fit: cover;
    }

    .pintuan_duobaol .chengt_bifa{
        position: relative;
        padding: .125rem .10rem;
        background-color: white;
        display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
    }
    .pintuan_duobaol .chengt_bifa_img{
        width: 34%;
        height: .90rem;
        margin-right: 5%;
    }

    .pintuan_duobaol .chengt_bifa_img img{
        width:100%;
        height:100%;
        object-fit: cover;
    }


    .pintuan_duobaol .chengt_bifa_text{
        font-family: 'Microsoft JhengHei Light', 'Microsoft JhengHei', 'Microsoft YaHei Light', 'Microsoft YaHei', sans-serif;
        font-size: .14rem;
        color: #AEAEAE;
        width: 61%;
    }
    .pintuan_duobaol .chengt_bifa_text>p:first-child{
        font-size:.16rem;
        color: rgb( 41, 39, 42 );
        margin-bottom: .04rem;
    }
    .pintuan_duobaol .over_hidden{
        line-height: .21rem;
        max-height: .42rem;

    }

    .pintuan_duobaol .over_hidden a{
        color: #AEAEAE;
    }

    .pintuan_duobaol .chengt_bifa_text>p:last-child a{
        display: inline-block;

        color: rgb( 219, 55, 82 );
        text-align: right;
        margin-top: .01rem;
    }
    .pintuan_duobaol .chengt_bifa_text>p:nth-child(2)>span{
        color: #DB3A53;
    }
    .pintuan_duobaol .chengt_bifa_text>p:nth-child(2)>span:first-child{font-size: .12rem}
    .pintuan_duobaol .chengt_bifa_text>p:nth-child(2)>span:nth-child(2){font-size: .18rem}
    .pintuan_duobaol .cantuan_detail{
        display: flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        align-items: center;
        -webkit-align-items: center;
        background-color: white;
        padding: .10rem 0;
    }
    .pintuan_duobaol .cantuan_detail_div>span{
        display: inline-block;
        width: .30rem;
        height: .30rem;
        border-radius: 50%;
        background-color: #E6E6E6;
        margin: .06rem 0;
    }

    .pintuan_duobaol .cantuan_detail_div>span img{
        width:100%;
        height:100%;
        border-radius:50%;
        object-fit: cover;
    }
    .pintuan_duobaol .cantuan_detail_div>span:first-child{
        position: relative;

    }

    .pintuan_duobaol .cantuan_detail_div>span:first-child:before{
        position: absolute;
        content: '团';
        width: .16rem;
        height: .16rem;
        line-height: .16rem;
        text-align: center;
        font-size: .08rem;
        -webkit-text-size-adjust:none ;
        border-radius: 50%;
        color: white;
        background-color: #DB3A53;
        top: -.05rem;
        right: -.05rem;
        z-index: 3;
    }

    .pintuan_duobaol .cantuan_detail>p{
        font-size: .14rem;
        color: rgb( 40, 38, 41 );
    }
    .pintuan_duobaol .datuan{
        width: .16rem;
        height: .16rem;
        line-height: .16rem;
        text-align: center;
        font-size: .08rem;
        -webkit-text-size-adjust:none ;
        border-radius: 50%;
        color: white;
        background-color: #DB3A53;
        position: absolute;
        top: -.05rem;
        right: -.05rem;
    }
    .pintuan_duobaol .fenmiao{
        display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
        font-size: .14rem;
        color: rgb( 171, 171, 171 );
        margin: .12rem 0;
        width: 100%;
    }
    .pintuan_duobaol .fenmiao:before{
        content: '';
        display: inline-block;
        width: 11%;
        height: 0;
        border-bottom: .01rem solid #DB3A53;
        margin-right: .08rem;
    }
    .pintuan_duobaol .fenmiao:after{
        content: '';
        display: inline-block;
        width: 11%;
        height: 0;
        border-bottom: .01rem solid #DB3A53;
        margin-left: .08rem;
    }
    .pintuan_duobaol .red_line{
        display: inline-block;
        padding:0 .03rem;
        line-height: .22rem;
        text-align: center;
        margin: 0 .05rem;
        height: .22rem;
        border-radius: .03rem;
        background-color: #DB3A53;
        color: white;
        position: relative;
    }
    .pintuan_duobaol .red_line:before{
        content: '';
        display: inline-block;
        width: 100%;
        height: 0;
        border-bottom: .01rem solid white;
        position: absolute;
        top: 50%;
        left: 0;
    }
    .pintuan_duobaol .cantuan_detail>a{
        display: block;
        font-size: .14rem;
        color: rgb( 40, 38, 41 );
    }

    .pintuan_duobaol .cantuan_detail>a span{
        display: inline-block;
        width:.07rem;
        height:.07rem;
        border-top:.01rem solid #DB3A53;
        border-right:.01rem solid #DB3A53;
        transform: rotate(45deg);
        margin-left:.03rem;
        vertical-align: middle;
        -webkit-transition: all .3s linear;
        -moz-transition: all .3s linear;
        -ms-transition: all .3s linear;
        -o-transition: all .3s linear;
        transition: all .3s linear;
    }

    .pintuan_duobaol .cantuan_detail .groupback_detai{
        width:100%;
        height:auto;
        overflow: hidden;
        padding-top:.10rem;
    }

    .pintuan_duobaol .cantuan_detail .groupback_detai .perdetai{
        display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        align-items: center;
        -webkit-align-items: center;
        width: 100%;
        height:.45rem;
        color: rgb( 171, 171, 171 );
        font-size: .14rem;
    }

    .pintuan_duobaol .cantuan_detail .groupback_detai .perdetai:nth-child(1){
        position: relative;
        background: #e6e6e6;
    }

    .pintuan_duobaol .cantuan_detail .groupback_detai .perdetai:nth-child(1):before{
        content: '';
        position: absolute;
        top:-.05rem;
        left:50%;
        width:0;
        height:0;
        border-bottom:.06rem solid #e6e6e6;
        border-left:.06rem solid transparent;
        border-right:.06rem solid transparent;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .pintuan_duobaol .zero_zero{
        display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        align-items: center;
        -webkit-align-items: center;
    }

    .pintuan_duobaol .zero_zero .headImg{
        width:.30rem;
        height:.30rem;
        border-radius:.05rem;
        overflow: hidden;
        margin-right:.10rem;
    }

    .pintuan_duobaol .zero_zero span{
        display: inline-block;
        width:.80rem;
        height:.30rem;
        line-height: .30rem;
    }

    .pintuan_duobaol .zero_zero .headImg img{
        width:100%;
        height: 100%;
        object-fit: cover;
    }

    .pintuan_duobaol .maybe_like{
        background-color: white;
        padding: .10rem;
        width: 100%;
        box-sizing: border-box;
        padding-bottom: .55rem;

    }
    .pintuan_duobaol .maybe_like>p{
        text-align: center;
        font-size:.14rem ;
        color: rgb( 40, 38, 41 );
        margin-bottom: .12rem;
    }
    .pintuan_duobaol .iphone_num{
        width:100%;
        display: flex;
        -webkit-flex-flow:row wrap;
        justify-content: space-around;
        -webkit-justify-content: space-around;
    }
    .pintuan_duobaol .iphone_num>a>div{
        margin-bottom: .09rem;
    }
    .pintuan_duobaol .iphone_num>a:nth-of-type(2n)>div{
        border-left: .01rem solid #F2F2F2;
    }

    .pintuan_duobaol .iphone_num>a>div img{
        vertical-align: bottom;
        width: 100%;
        height: 1.40rem;
        margin: 0 auto;
        object-fit: contain;
    }
    .pintuan_duobaol .iphone_num>a{
        width: 50%;
        font-size: .14rem;
        color: rgb( 40, 38, 41 );
        text-align: center;
    }
    .pintuan_duobaol .iphone_num>a>span {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: left;
        padding: 0 .02rem 0 .06rem;
        margin-bottom: .02rem;
        font-size: .12rem;
        line-height: .16rem;
        height: .34rem;
    }
    .pintuan_duobaol .iphone_num>a>span:last-child {
        position: relative;
    }
    .pintuan_duobaol .iphone_num>a>span .price {
        color: #DB3A53;
        float: left;
        font-size: .18rem;
        position: absolute;
        top:.02rem;
    }
    .pintuan_duobaol .iphone_num .scale {
        display: inline-block;
        transform: scale3d(0.9,0.9,1);
        transform-origin: bottom;
    }
    .pintuan_duobaol .iphone_num .group_per {
        display: inline-block;
        position: absolute;
        left: .50rem;
        top: -.02rem;
    }
    .pintuan_duobaol .iphone_num>a>span .group_bought {
        color: rgb( 171, 171, 171 );
        width: 55%;
        display: inline-block;
        position: absolute;
        top: .16rem;
        left: .50rem;

    }
    .pintuan_duobaol .iphone_num>a>span .group_bought .wrap {
        display:block;
        height: .05rem;
        border-radius: .05rem;
        background-color: #efeeee;
        overflow: hidden;
    }
    .pintuan_duobaol .iphone_num>a>span .group_bought .bar {
        display:block;
        height: 100%;
    }
    .pintuan_duobaol .iphone_num>a>span .group_bought .color {
        display:block;
        width: 100%;
        height:100%;
        background:#FFA538;
    }
    .pintuan_duobaol .iphone_num>a img{width: 100%}
    .pintuan_duobaol .btm_buton{
        position:fixed;
        left:0;
        bottom:0;
        width:calc(100% - .2rem);
        padding: .1rem;
        background-color: white;
        display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }
    .pintuan_duobaol  .btm_buton>a{
        font-size: .14rem;
        color: white;
        display: inline-block;
        height: .35rem;
        line-height: .35rem;
        border-radius: .05rem;
        text-align: center;
    }
    .pintuan_duobaol  .btm_buton>a:first-child{
        background-color: #CCCCCC;
        width: 36%;
    }
    .pintuan_duobaol .btm_buton>a:last-child{
        background-color: #DB3A53;
        width: 60%;
    }
    .pintuan_duobaol .grey_div{
        width: 100%;
        height: .05rem;
        background-color: #F2F2F2;
    }
</style>
<template>
    <div class="page-grouppayback page-wrap" id="page-grouppayback">
        <header-component :page-name="pageName"></header-component>
        <section class="pintuan_duobaol">
            <div class="chengt_bifa">
                <div class="chengt_bifa_img"><a href="javascript:;"  v-link="{path:'/groupHome',query:{id:data.productid}}"><img :src="data.main_image" /></a> </div>
                <div class="chengt_bifa_text">
                    <p class="over_hidden lineclamp"><a href="javascript:;" v-link="{path:'/groupHome',query:{id:data.productid}}">{{data.main_title}}</a> </p>
                    <p>
                        {{data.join_num}}人团：
                        <span>￥</span>
                        <span>{{data.price}}</span>
                        <span>/件</span>
                    </p>
                    <p><a href="javascript:void(0);" data-grule @click="isShowRule=true">规则介绍 >></a></p>
                </div>
                <div class="pintuan_status">

                    <img v-if="data.pt_status==3" src="../images/group_fail.png"/>

                    <img v-if="data.pt_status==2" src="../images/group_success.png"/>

                </div>
            </div>
            <div class="grey_div"></div>
            <div class="cantuan_detail">
                <div class="cantuan_detail_div">

                    <span v-for="(k,i) in data.head_images" track-by="$index">
                        <img :src="i"/>
                    </span>

                </div>
               <p v-if="data.pt_status==1">还差{{data.surplus_num}}人，终于等到你</p>

                <div class="fenmiao" v-if="data.pt_status==1">
                    <span>剩余</span>
                    <div>
                        <span class="red_line h">{{hour}}</span>
                    </div>
                    <span>时</span>
                    <div>
                        <span class="red_line m">{{minute}}</span>
                    </div>
                    <span>分</span>
                    <div>
                        <span class="red_line s">{{second}}</span>
                    </div>
                    <span>秒拼团结束</span>
                </div>

                <a class="showAllGroup" href="javascript:;" @click="isShowAll=!isShowAll">查看全部参团详情<span class="arrow" :style="{webkitTransform:!isShowAll?'rotate(45deg)':'rotate(135deg)',marginTop:!isShowAll?'0px':'-6px'}"></span> </a>
                <div class="groupback_detai" v-show="isShowAll">

                    <div class="perdetai" v-for="(k,i) in data.pingtuan_lists">
                        <div class="zero_zero">
                            <span class="headImg"><img :src="i.head_image" /></span>
                            <span class="nowrap"><template v-if="i.is_opener==1">团长&nbsp;&nbsp;</template>{{i.username}}</span>
                        </div>
                        <p><span>{{i.create_time}}</span><template v-if="i.is_opener==1">开团</template><template v-else>参团</template></p>
                    </div>
                </div>
            </div>
            <div class="grey_div"></div>
            <div class="maybe_like">
                <p>你可能会喜欢</p>
                <div class="iphone_num">

                    <a href="javascript:;"  v-link="{path:'/detail',query:{id:i.shopid}}" v-for="(k,i) in Recommond">
                        <div>
                            <img :src="i.thumb" alt="">
                        </div>
                        <span>{{i.shopTitle}}</span>
                        <span>
                            <object><a class="price"><span class="scale">￥</span>1</a></object>
                            <div class="group_per nowrap">当前进度：{{(i.currentNum/i.totalNum)*100 | toInt}}%</div>
                            <div class="group_bought"><p class="wrap"><span class="bar" :style="{width:(i.currentNum/i.totalNum)*100 + '%'}"><i class="color"></i></span></p></div></object>
                        </span>
                    </a>
                </div>
            </div>
            <div class="grey_div"></div>
            <div class="btm_buton">
                <a href="javascript:;"  v-link="{path:'/list'}">更多好货</a>

                <a v-if="data.pt_status!=1" href="javascript:;"   v-link="{path:'/groupHome',query:{id:data.productid}}"><template v-if="data.surplus_num!=0">还差{{data.surplus_num}}人拼团成功</template><template v-else>我也要开团</template></a>

                <template v-else>

                    <a v-if="data.is_join==1" href="javascript:;"  id="showPaybackInfo2" @click="isMask=true"><template v-if="data.surplus_num!=0">还差{{data.surplus_num}}人拼团成功</template><template v-else>我也要开团</template></a>

                    <a v-else href="javascript:;"   v-link="{path:'/groupHome',query:{id:data.productid,g_id:data.tuanid}}"><template v-if="data.surplus_num!=0">还差{{data.surplus_num}}人拼团成功</template><template v-else>我也要开团</template></a>

                </template>

            </div>
        </section>

        <div class="mask" id="payBack_mask" v-show="isMask" @click.self="isMask=false">
        <div class="pay-container">
            <div class="pay-share"></div>
            <ul class="pay-share-explain">
                <template  v-if="data.surplus_num!=0">
                <li>还差<span class="pay-count">{{data.surplus_num}}</span>人,人满才能成团</li>
                <li>点击右上角按钮，发送给<span class="pay-friends">朋友</span>或者<span class="pay-friends">群聊</span></li>
                </template>
                <template>
                <li>恭喜您拼团成功</li>
                <li>活动结束后的1个工作日内将公布中奖名单</li>
                <li>请留意公众号推送消息</li>
                </template>

            </ul>
            <p class="share" id="groupPayback-share">点击此处<span class="pay-count" @click=cnzz("分享到朋友圈的图片") @click.self="isShare=true">分享到朋友圈>></span></p>
        </div>
        <!--<div class="shareBack">-->
            <!--<p class="shareSuccess"><span class="shareComplete"><em class="right"></em></span><span>分享成功</span></p>-->
            <!--<p class="shareText">继续分享才能大大提高成团率哦~</p>-->
            <!--<button class="shareNext" data-cnzz="继续分享">继续分享</button>-->
            <!--<div class="moreGoods"><span>更多商品</span></div>-->
            <!--<p class="shareText">90%的人都在这里发现心仪好货~</p>-->
            <!--<a class="backHome" data-href="/" data-cnzz="前往拼宝首页">前往拼宝首页</a>-->
        <!--</div>-->
    </div>
    <div class="shareImage" v-show="isShare" @click="isShare=false">
        <p>分享到朋友圈：长按并保存下图，在朋友圈中发表</p>
        <img :src="shareSrc" class="pay-shareImg" id="groupPay-shareImg" />
    </div>
        <img src="../images/group_progress.jpg"  class="group_progress_img" @click="isShowRule=false"  v-show="isShowRule"/>
    </div>
    <pop :status-pop="statusPop" :status-toast="statusToast" :msg="msg" >
        <a href="javascript:;" @click="back">确定</a>
    </pop>
</template>
<script>
    import Weixin from '../libs/wxShare'
    import User from '../module/user'
    import Goods from '../module/goods'
    import pop from '../components/pop'
    import headerComponent from '../components/header'
//    import Config from '../config/config'
    import {toInt} from '../filters/filter'
    module.exports = {
        data() {
            return {
                pageName:'支付详情',
                data:{},
                Recommond:[],
                code:'',
                tuanid:'',
                group_type:'',
                interval:null,
                isWeixin:Weixin.isWeixin,
                statusPop:false,
                statusToast:false,
                msg:'',
                isShowAll:false,
                isShowRule:false,
                timer:0,
                hour:0,
                minute:0,
                second:0,
                isShare:false,
                isMask:false,
                shareSrc:Config.apiDomain+'/share/shareGroupPic?o_code='+this.code
            }
        },
        filters:{
          toInt
        },
        components: {
            pop,
            headerComponent
        },
        created(){

            this.$dispatch('isLoading', true);
        },
        async ready() {
            if(!User.isLogin){

                window.location.href=Config.apiDomain+'/weixin/wxAuth'+window.location.search;

            }else{

                this.tuanid = this.$route.query.g_id;
                this.group_type = this.$route.query.g_type;
                this.code = this.$route.query.o_code;

                if(!this.tuanid){

                    this.statusPop=true;
                    this.msg = '支付失败,扣款失败';
                    return;
                }

                let res = await User.groupDetail(this.tuanid);
                let reCommond = await Goods.getRecommond();
                if (res.status == 200) {
                    this.data = Object.assign({},this.data,res.data);
                    this.Recommond.push(...reCommond)
                    Weixin.updateShare({
                        title:res.data.main_title,
                        link:window.location.origin + window.location.pathname+location.search+"&isInvite=1",
                        imgUrl:res.data.main_image,
                    })

                    this.timer = setInterval(()=>{

                    this.hour=Math.floor(res.data.surplus_time/60/60%24);
                    this.minute=Math.floor(res.data.surplus_time/60%60);
                    this.second=Math.floor(res.data.surplus_time%60);

                    if(res.data.surplus_time<=0){
                        clearInterval(this.timer);
                    }
                    res.data.surplus_time--;

                },1000)


                } else {
                    this.statusPop = true;
                    this.msg = res.msg;
                }

            }

            this.$dispatch('isLoading', false);
        },
        beforeDestroy() {
            clearInterval(this.timer)
        },
        methods: {
            back(){
                this.statusPop=false;
                this.$router.replace({path:'/home'})
            }
        }
    }
</script>
